<template>
  <div class="db-tab-panel">
    <!-- 顶部按钮 -->
    <db-header :tab />
    <!-- 输入条件 -->
    <db-condition :tab />
    <!-- 数据表格 -->
    <db-container :tab />
  </div>
</template>
<script lang="ts" setup>
import DbCondition from "@/page/data-browse/component/DbCondition.vue";
import DbContainer from "@/page/data-browse/component/DbContainer/index.vue";
import DbHeader from "@/page/data-browse/component/DbHeader/DbHeader.vue";
import { UseDataBrowserInstance } from "@/hooks";

defineProps({
  tab: {
    type: Object as PropType<UseDataBrowserInstance>,
    required: true
  }
});
</script>
<style scoped lang="less">
.db-tab-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;

  .option {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--td-border-level-2-color);
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
    }

    .right {
      display: flex;
    }
  }

  .condition {
    position: absolute;
    top: 33px;
    left: 0;
    right: 0;
    height: 35px;
    border-bottom: 1px solid var(--td-border-level-2-color);

    .arco-split-trigger-vertical {
      height: auto;
    }

    .condition-sep {
      background-color: var(--td-border-level-2-color);
    }
  }

  .content-table {
    position: absolute;
    top: 66px;
    left: 0;
    right: 0;
    bottom: 0;

    .data-browse-empty {
      text-align: center;
      padding-top: 20%;
      font-size: 1.5em;
    }
  }
}

.table-view-trigger {
  background-color: var(--td-bg-color-container);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
</style>
